/*
 * @Author: linxun 
 * @Date: 2021-05-27 10:26:28 
 * @Last Modified by: linxun
 * @Last Modified time: 2021-07-21 11:46:57
 * @Description: 数据集切分
 */

import React, { useEffect, useState } from 'react';
import { Modal, Form, InputNumber, Alert, message } from 'antd';

interface RatioProps {
  splitRatio: number;
}

interface Props {
  visible: boolean;
  cancel: () => void;
  onSubmit: (ratio: RatioProps) => void;
  loading: boolean;
  curRecord: { itemCount: number };
}

const commonLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

const SegmentModal: React.FC<Props> = props => {
  const [form] = Form.useForm();
  const { visible, cancel, onSubmit, loading, curRecord } = props;
  const [trainRatio, setTrainRatio] = useState<number>(80);
  const imgCount = curRecord.itemCount;
  const trainCount = Math.floor(imgCount * (trainRatio / 100));

  useEffect(() => {
    if (visible) {
      setTrainRatio(80);
    }
  }, [visible]);

  const onOk = () => {
    if (trainCount === 0 || imgCount - trainCount === 0) {
      // Modal.confirm({
      //   title: '温馨提示',
      //   content: `当前比例${trainCount === 0 ? '训练' : '测试'}集图片数量为 0，确定要切分吗？`,
      //   onOk: () => {
      //     form.validateFields().then(values => {
      //       onSubmit({
      //         splitRatio: values.splitRatio,
      //       });
      //     });
      //   },
      //   okText: '确定切分',
      // });
      message.error(`当前比例${trainCount === 0 ? '训练' : '测试'}集图片数量为 0，请重新输入！`);
      return;
    } else {
      form.validateFields().then(values => {
        onSubmit({
          splitRatio: values.splitRatio,
        });
      });
    }
  };

  return (
    <Modal
      title='数据集切分'
      visible={visible}
      onCancel={cancel}
      onOk={onOk}
      maskClosable={false}
      okText='切分'
      confirmLoading={loading}
      destroyOnClose
      afterClose={() => {
        form.resetFields();
        setTrainRatio(80);
      }}
    >
      <Alert
        showIcon
        message={`当前比例训练集图片数：${trainCount} 张，测试集图片数：${imgCount - trainCount} 张`}
        style={{ marginBottom: 24 }}
      />
      <Form form={form} initialValues={{ splitRatio: 80 }}>
        <Form.Item
          label='训练集比例'
          {...commonLayout}
          extra='该数据集将按自动切分为训练集和测试集'
          rules={[
            { required: true, message: '请输入训练集比例' },
            () => ({
              validator(_, value) {
                if (value && typeof value !== 'number' || value > 100 || value < 0) {
                  return Promise.reject('请输入0-100的数字！');
                }
                return Promise.resolve();
              }
            })
          ]}
          name='splitRatio'
        >
          <InputNumber
            placeholder='请输入训练集比例'
            max={100}
            min={0}
            style={{ width: '100%' }}
            onChange={value => setTrainRatio(Number(value))}
            step={1}
            formatter={val => `${val}%`}
          />
        </Form.Item>
      </Form>
      <Form.Item
        label='测试集比例'
        {...commonLayout}
        required
      >
        {(100 - trainRatio)}%
      </Form.Item>
    </Modal>
  )
}

export default SegmentModal;